<template>
	<view class="app">
		<authorize @onLoadFun="onLoadFun" v-model="isHidden" isGoIndex></authorize>
		<mescroll-body ref="mescrollUni" @init="mescrollInit" class="app-mescroll" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="app-container">
				<view class="list-wrap">
					<scroll-view class="scroll-view-list" scroll-x="true">
						<div class="scroll-view-item radius" :key="key" v-for="(swiper, key) in swiperList">
							<image :src="fileUrl + swiper.path" @tap="toSwiper(swiper)" mode="aspectFill" style="width: 100%"></image>
						</div>
					</scroll-view>
					<view class="card margin-top no-card cu-card dynamic" v-for="(item, index) in list" :key="index" :index="index">
						<view class="item cu-item shadow">
							<view class="cu-list menu-avatar">
								<view class="cu-item">
									<view class="cu-avatar radius" :style="{ backgroundImage: 'url(' + item.avatar_url + ')' }"></view>
									<view class="content flex-sub">
										<view class="text-sm">{{ item.nick_name }}</view>
										<view class="text-gray text-sm flex justify-between">{{ item.create_time }}</view>
									</view>
								</view>
							</view>
							<view class="text-content text-default text-sm">
								<text class="margin-right-xs">#{{ item.demand_type_describe }}# </text>
								<text class="margin-right-xs">#{{ item.price }}元# </text>
								<text v-if="item.tip !== '0.00'" class="margin-right-xs">#打赏{{ item.tip }}元# </text>
								<text class="text-sm margin-top-xs text-black">{{ item.describe }}</text>
							</view>
							<view class="text-gray text-sm text-right padding-right padding-bottom-sm">
								<button class="fr cu-btn bg-primary radius shadow padding-lr sm" @tap="acceptOrder(item)">帮忙</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="publish" @click="publishEvent">
			<button class="cu-btn cuIcon lg bg-primary"><text class="cuIcon-add"></text></button>
		</view>
	</view>
</template>

<script>
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import authorize from '@/components/authorize/authorize';
import { PAGE_SIZE } from '@/common/tools/config.js';
import { getAdvertising } from '@/api/common.js';
import { getCommunityDemandInfoList, wechatUserTakeOrder } from '@/api/community.js';
import { VUE_APP_BASE_API } from '@/common/tools/config.js';
export default {
	mixins: [MescrollMixin],
	components: {
		authorize,
		MescrollBody
	},
	data() {
		return {
			fileUrl: VUE_APP_BASE_API,
			isHidden: false,
			downOption: {
				auto: false, //是否在初始化后,自动执行下拉回调callback; 默认true
				native: true // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效
			},
			// 上拉加载的常用配置
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				empty: {
					icon: "/static/img/noNews.png"
				}
			},
			swiperList: [],
			list: [],
			pageSize: PAGE_SIZE,
			currentIndex: 1,
			total: 20
		};
	},
	onLoad(options) {
		this.getAdvertisingEvent()
	},
	methods: {
		onLoadFun() {
			this.mescroll.resetUpScroll();
		},
		//查询广告栏图片数组
		getAdvertisingEvent() {
			getAdvertising({
				//1为'我的'页面广告位，2为'我提交的'页面广告位
				advertisingType: 2
			}).then(res => {
				this.swiperList = res.result.path
			})
		},
		/**
		 * 查询社区需求信息列表
		 */
		initialize({ pageSize, currentPage }) {
			return new Promise((resolve, reject) => {
				getCommunityDemandInfoList({
					type: 1,
					pageSize: pageSize,
					currentPage: currentPage
				})
					.then(res => {
						resolve(res.result);
					})
					.catch(err => {
						reject(err);
					});
			});
		},
		acceptOrder(item) {
			uni.showModal({
				title: '确认帮忙该同学吗',
				content: '我们的事业是正义的，我们的团结是坚强的',
				success: res => {
					if (res.confirm) {
						wechatUserTakeOrder({
							demand_order_id: item.demand_order_id
						}).then(res => {
							uni.navigateTo({
								url: `/community-pages/accept-order?demand_order_id=${item.demand_order_id}`
							});
						});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		/**
		 * 下拉刷新的回调
		 * @param {Object} mescroll
		 */
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		/**
		 * 上拉加载的回调
		 * @param {num} 页码, 默认从1开始
		 * @param {size} 页长, 默认每页10条
		 */
		upCallback(page) {
			const { num, size } = page;
			this.initialize({
				pageSize: size,
				currentPage: num
			})
				.then(result => {
					if (num == 1) this.list = [];
					this.list = this.list.concat(result.showing);
					this.mescroll.endBySize(result.showing.length, result.total);
				})
				.catch(err => {
					// 失败隐藏下拉加载状态
					this.mescroll.endErr();
				});
		},
		/**
		 * 发布需求
		 */
		publishEvent() {
			uni.navigateTo({
				url: '/community-pages/publish',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		//轮播图跳转
		toSwiper(swiper) {
			if(swiper.advertising_type === 0) {
				const src = encodeURIComponent(swiper.url);
				uni.navigateTo({
					url: `/pages/web-view?src=${src}`
				})
				
			}else if(swiper.advertising_type === 1) {
				uni.navigateTo({
					url: swiper.url
				})
			}
			
		},
	}
};
</script>

<style lang="scss" scoped>
.scroll-view-list {
	white-space: nowrap;
	overflow-x: scroll;
	margin: 0;

	.scroll-view-item {
		background-color: #FFFFFF;
		display: inline-block;
		margin-right: 10px;
		height: 200rpx;
		width: 172.5px;
		overflow: hidden;

		image {
			height: 200rpx;
		}
	}
	.radius {
		border-radius: 10px !important
	}
}
.app-mescroll {
	width: 100%;
}
.app-container {
	position: relative;
	.list-wrap {
		.card {
			padding: 20upx;

			.item {
				.cu-list.menu-avatar {
					> .cu-item:after {
						border-bottom: 0;
					}
					.cu-item {
						.content {
							left: 120rpx;
							line-height: 1.4em;
						}
					}
					
				}
			}
		}
	}
}
.top-warp {
	z-index: 9990;
	position: fixed;
	top: --window-top; /* css变量 */
	left: 0;
	width: 100%;
	height: 60upx;
	background-color: white;
	text-align: center;
	border-bottom: 1upx solid #ddd;
}
.publish {
	position: fixed;
	right: 0;
	bottom: 200upx;
	background: #a5c3f7;
	border-radius: 10px 0 0 10px;
	z-index: 2;
}
</style>
